<script setup>
import { ref } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  style: {
    type: Object,
    default: () => ({})
  }
})
const navbar = ref(props.list[0])
const emits = defineEmits(['chosedBar'])
const chosed = (item) => {
  navbar.value = item
  emits('chosedBar', navbar.value)
}
</script>
<template>
  <div class="legendbox" :style="style">
    <p v-for="(item, index) in list" :key="index">
      <img :src="item.img" alt="" />
      <span>{{ item.name }}</span>
    </p>
  </div>
</template>
<style scoped lang="scss">
.legendbox {
  position: absolute;
  right: 400px;
  bottom: 30px;
  padding: 10px;
  background: url('@img/common/lenged_bg.png');
  background-size: 100% 100%;

  p {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 5px 0;
    color: #b3d9ff;
    font-size: 15px;
    font-weight: 300;

    img {
      width: 16px;
      margin-right: 8px;
    }
  }
}
</style>
